<template>
	<el-dialog :visible.sync="options.centerDialogVisible"
		width="900px"
	>
		<!-- 头部信息 -->
		<h3 class="header-title clearfix">
			<span class="fl"></span>
			<p class="fl">{{options.companyName}}</p>
		</h3>
		<ul class="content clearfix">
			<h3 class="content-title fl">基本信息</h3>
			<li class="con-item fl">
				<p><span>公司名称</span>{{options.companyName}}</p>
				<p><span>公司地址</span>{{options.address}}</p>
				<p><span>公司性质</span>{{options.companyNature}}</p>
				<p><span>公司规模</span>{{options.companyScale}}</p>
				<p><span>企业联系电话</span>{{options.companyPhone}}</p>
				<p><span>法人姓名</span>{{options.legalPerson}}</p>
				<div v-if="options.remarks"><span>备注</span><span class="remarks">{{options.remarks}}</span></div>
			</li>
			<li class="con-item fl" style="width: 60%;">
				<p><span>所属行业</span>{{options.industry}}</p>
				<p><span>联系电话</span>{{options.telphone}}</p>
				<p><span>企业邮箱</span>{{options.mailbox}}</p>
				<div class="clearfix">
					<span>对公账户认证</span>
					<img :src="options.accountPicture" @click="enlargeImg(options.accountPicture)" alt="">
					<span>营业执照</span>
					<img :src="options.accountPicture" @click="enlargeImg(options.accountPicture)" alt="">
				</div>
				<div><span>企业介绍</span><span class="introduction">{{options.introduction}}</span></div>
			</li>
		</ul>
		<div class="footer-btn" v-if="options.showBtn">
			<el-button type="primary" size="mini" style="width:100px" @click="$emit(options.subPass)">通过</el-button>
			<el-button type="danger" size="mini" style="width:100px" @click="$emit(options.subFail)">未通过</el-button>
		</div>
		<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="600px">
			<img style="margin: 10%;width: 80%;" :src="dialogImageUrl" alt="">
		</el-dialog>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options: {
			require: true,
			type: Object
		}
	},
	data(){
		return {
			dialogVisible: false,									//放大弹窗显示隐藏
			dialogImageUrl: '',										//被放大的图片路径
		}
	},
	methods:{
		enlargeImg(src){
			this.dialogVisible = true;
			this.dialogImageUrl = src;
		}
	}
}
</script>

<style scoped="scoped">
.header-title{
	padding: 20px;border-bottom: 1px solid #D2D2D2;
}
.header-title span{
	width: 15px;height: 30px;background-color: #0064E4;margin-right: 10px;
}
.header-title p{
	font-weight: bold;line-height: 30px;
}
.content{
	width: 800px;margin: 0 auto;padding: 30px 0;
}
.content-title{
	width: 100%;
}
.con-item{
	width: 40%;
}
.con-item p{
	line-height: 40px;height: 40px;color: #000;
}
.con-item div{
	margin-top: 10px;
}
.con-item p span,.con-item div span{
	color: #727272;display: inline-block;width: 120px;padding-right: 15px;
	text-align: right;vertical-align: top;
}
.con-item div img{
	width: 110px;border: 1px solid #000;display: inline-block;
}
.con-item .remarks,.con-item .introduction{
	border: 1px solid #DDDFE7;width: 200px;min-height: 120px;border-radius: 4px;
	padding: 8px;line-height: 20px;text-align: left;
}
.con-item .introduction{
	width: 350px;min-height: 160px;
}
.footer-btn{
	padding: 50px 0;text-align: center;
}
</style>
